<template>
  <div>
    <a-spin :spinning="isLoading">
      <a-form :model="editForm" name="edit-form" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }" autocomplete="off"
        @finish="editPost">
        <a-form-item label="&nbsp;" name="">
          <span style="font-size: 18px;font-weight: bold;">{{ props.menuName }}</span>
        </a-form-item>
        <a-form-item label="通用按钮">
          <a-checkbox-group v-model:value="editForm.common">
            <a-checkbox value="add" :checked="true">新增</a-checkbox>
            <a-checkbox value="edit" :checked="true">编辑</a-checkbox>
            <a-checkbox value="delete" :checked="true">删除</a-checkbox>
            <a-checkbox value="undelete" :checked="true">恢复正常</a-checkbox>
            <a-checkbox value="detail">详情</a-checkbox>
          </a-checkbox-group>
        </a-form-item>
        <a-form-item :label="`自定义菜单名${n}`" v-for="n in 5">
          <a-space style="display: flex;" size="large" >
            <a-form-item :name="`key[${$n - 1}]`" style="margin-bottom: -24px;">
              <a-input v-model:value="editForm.key[n - 1]" :placeholder="`自定义菜单名${n}`" />
            </a-form-item>
            <a-form-item :name="`name[${n - 1}]`" :label="`菜单key${n}`" style="margin-bottom: -24px;">
              <a-input v-model:value="editForm.name[n - 1]" :placeholder="`菜单key${n}`" />
            </a-form-item>
            <span style="color: red;">同一行的菜单名和菜单key必须都输入才会生效</span>
          </a-space>
        </a-form-item>

        <a-form-item :wrapper-col="{ offset: 4, span: 16 }">
          <a-button type="primary" html-type="submit">立即提交</a-button>
          <a-button @click="editCancel" style="margin-left:10px;">取消</a-button>
        </a-form-item>
      </a-form>
    </a-spin>
  </div>
</template>

<script setup>
import { ref, inject } from 'vue';
import { message } from 'ant-design-vue';
import { editAdminMenu } from "@/api/admin";   //引入api

const { refreshCurrentPage } = inject('refreshCurrentPage');  // 依赖注入--刷新当前页面

const isLoading = ref(false);    // 控制loading
const props = defineProps(['pid', 'level', 'menuName']);  // 接收父组件传参
console.log(props);

const editForm = ref({
  pid: props.pid,
  level: props.level,
  common: ['add', 'edit', 'delete', 'undelete'],
  key: ['','','','',''],
  name: ['','','','',''],
});  // 编辑表单


// 获取接口数据列表
const editPost = () => {
  isLoading.value = true;

  editAdminMenu(editForm.value).then((res) => {
    if (res === false) return;

    message.success('操作成功，即将跳转……');
    setTimeout(() => { editCancel() }, 1000);
  }).catch((rej) => {
    isLoading.value = false;
    message.error('失败：' + rej);
  });
};

// 跳转到列表页
const editCancel = () => {
  isLoading.value = false;
  refreshCurrentPage();
}
</script>

<style scoped></style>